<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title>中智融通</title>
		<style>
			html, body {
				margin: 0;
				padding: 0;
				height: 100%;
				background-color: #F0EED9;
				font: normal 100% Helvetica, Arial, sans-serif;
			}
			.main {
				position: relative;
				margin-top: 3%;
				padding-bottom: 3%;
				margin-left: 2%;
				margin-right: 2%;
				padding-bottom: 3%;
				padding-top: 3%;
				border-radius: 8px;
				background-color: #fff;
				border-color: #F0F0F0;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
				box-shadow: 0 0 3px #F0F0F0;
			}
			.form-group {
				padding-top: 2%;
				width: 90%;
				margin-left: 8%;
				margin-right: 5%;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
			}
			.label {
				display: block;
				font-weight: bold;
				font-size: 1.1em;
				line-height: 1;
				white-space: nowrap;
				vertical-align: baseline;
				border-radius: .25em;
			}

			.form-control {
				display: inline-block;
				width: 90%;
				font-size: 1.1em;
				padding: 6px 12px;
				line-height: 1.42857143;
				color: #555;
				background-color: #F6F6F6;
				border: 1px solid #ccc;
				border-radius: 6px;
				-webkit-appearance: none;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
			}
			.form-control:focus {
				border-color: #66afe9;
				outline: 0;
			}

			.form-control::-webkit-input-placeholder {
				color: #999;
			}
			textarea.form-control {
				height: auto;
			}
			.form-group label:last-child {
				padding-top: 8px;
				display: block;
				font-weight: normal;
				font-size: 1.2em;
			}
					.starts {
				display: inline-block;
				top: 8px;
				position: relative;
				width: 150px;
				height: 30px;
				background: url('/images/wx/star.gif');
				overflow: hidden;
				cursor: pointer;
			}
			.starts .defaultStars {
				width: 100%;
				height: 100%;
				background: url('/images/wx/star.gif') no-repeat;
			}
			.starts ul {
				list-style: none;
				margin: 0;
				padding: 0;
				position: absolute;
				top: 0;
				left: 0;
			}
			.starts li {
				width: 30px;
				height: 30px;
				float: left;
				text-indent: -100px;
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<div class="container" id="container">
			<!--			<div class="head" id="head"></div>
			-->
			<div class="main" id="main">
				<!--				<div class="logo"></div>
				-->
				<div style="text-align: center; font-size: 1.6em; font-weight: bold;padding-bottom: 3%;">
					工单信息
				</div>
				<form class="form-horizontal">
					<div style="width:96%;margin-left:auto;margin-right:auto;border-top: 0.1em dashed #cccccc;height: 0.1em;overflow:hidden; "></div>
					<div class="form-group">
						<label class="label">机器序列号:</label>
						<input type="text" class="form-control" value="${repair.serialNumber}" readonly="readonly">
					</div>
					<div class="form-group">
						<label class="label">机器序地址:</label>
						<input type="text" class="form-control" value="${repair.machineAddress}" readonly="readonly">
					</div>
					<div class="form-group">
						<label class="label">故障信息:</label>
						<textarea class="form-control" readonly="readonly">${repair.faultInfo}</textarea>
					</div>
					<div class="form-group">
						<label class="label">报修时间:</label>
						<input type="text" class="form-control" value="${repair.repairDateStr}" readonly="readonly">
					</div>
					<div class="form-group">
						<label class="label">期望维修时间:</label>
						<input type="text" class="form-control" value="${repair.expectedRepairTimeStr}" readonly="readonly">
					</div>
					<div class="form-group">
						<label class="label">维修人:</label>
						<input type="text" class="form-control" value="${repair.maintenanceUser}" readonly="readonly">
					</div>
					<div class="form-group">
						<label class="label">备注信息:</label>
						<input type="text" class="form-control" value="${repair.maintenanceRemark}" readonly="readonly">
					</div>
					<div class="form-group">
						<label class="label">状态:</label>
						<input type="text" class="form-control" value="${repair.statusStr}" readonly="readonly">
					</div>

					<div class="form-group">
						<label class="label">体验满意度:</label>
						<div class="starts">
							<div id="useSatRating" class="defaultStars"></div>
						</div>
					</div>
					<div class="form-group">
						<label class="label">客服满意度:</label>
						<div class="starts">
							<div id="customerServiceSat" class="defaultStars"></div>
						</div>
					</div>
					<div class="form-group">
						<label class="label">评语:</label>
						<textarea class="form-control" readonly="readonly">${comment.comment}</textarea>
					</div>

				</form>
			</div>
		</div>
		<script>
			document.body.onload = function() {
				var clientHeight = document.body.clientHeight;
				document.getElementById('container').style.height = clientHeight + 'px';
				var main = document.getElementById('main');
				main.style.minHeight = 0.96 * clientHeight + 'px';
				
				var formGroups = document.getElementsByClassName('form-group');
  				for(var i=0,j=formGroups.length; i<j; i++){
  					if(i==0){
  						formGroups[i].style.paddingTop = 0.03* clientHeight + 'px';
  					}else{
  						 formGroups[i].style.paddingTop = 0.02* clientHeight + 'px';
  					}
  				}
  				
				var useSat = document.getElementById('useSatRating');
				useSat.style.backgroundPositionX = (parseInt(${comment.useSat})-5)*30 + 'px';
				useSat.style.backgroundPositionY = '-30px';
				var customerServiceSat = document.getElementById('customerServiceSat');
				customerServiceSat.style.backgroundPositionX = (parseInt('${comment.customerServiceSat}')-5)*30 + 'px';
				customerServiceSat.style.backgroundPositionY = '-30px';
			}
		</script>
	</body>
</html>